<?php
session_start();
$user = isset($_SESSION["user"])?$_SESSION["user"]:null;
$userId = $user?$user["id"]:null;
$theme = isset($_GET["theme"])?$_GET["theme"]:"";
if(!$theme){
    $theme = isset($_COOKIE["theme"])?$_COOKIE["theme"]:null ;
}else {
    setcookie("theme",$theme);
}
if(!$theme) $theme = "default";

$pageSize = 5;
$pageIndex = isset($_GET["pageIndex"])?$_GET["pageIndex"]:1;    
$queryTitle = isset($_GET["Title"])?$_GET["Title"]:null;
$queryAuthor = isset($_GET["AuthorId"])?$_GET["AuthorId"]:null;
$queryMinDate = isset($_GET["minDate"])?$_GET["minDate"]:null;    
$queryMaxDate = isset($_GET["maxDate"])?$_GET["maxDate"]:null;

$startRow = ($pageIndex-1)*$pageSize;

$sql = "select * from `article`";
$where = "";

if($queryTitle){
    if($where) $where .= " AND";   
    $where .= " Title like ('%$queryTitle%')";   
}

if($queryAuthor){
    if($where) $where .=" AND";
    $where .= "AuthorName like ('%$queryAuthor%')";    
}

if($queryMinDate){
    if($where) $where .= " AND";
    $where .= " CreateTime >='$queryMinTime'";
}

if($queryMaxDate){
    if($where) $where .= " AND";
    $where .= " CreateTime <='$queryMaxTime'";
}
if($where) 
    $sql .= " WHERE $where ";

$conn = new mysqli("localhost","root","","myblog");
$rows = [];
$sql .= " LIMIT $startRow,$pageSize ";
$rs = $conn->query($sql);
while($row = $rs -> fetch_assoc()){
    $rows[] = $row;
}
$rs->close();

$total = 0;
$sql = "SELECT count(Id) as t FROM `article`";
if($where) 
    $sql .= "WHERE $where";
$rs = $conn->query($sql);
$total = $rs->fetch_assoc()["t"];

$pageCount = ceil($total/$pageSize);

function makePageUrl($pageIndex){
    $querystring = "pageIndex=$pageIndex";
    foreach($_GET as $k=>$v){
        if($k==="pageIndex") continue;
        $querystring.="&$k=$v";
    }
    return $querystring;
}
?>
<!DOCTYPE html>
<html>
    <head><meta http-equiv="content-type" content="text/html" charset="utf-8">
    <link type="text/css" rel="stylesheet" href="<?=$theme?>.css"/>
    <title>文章</title>
    </head>
    <body>
        <div id="layout">
            <div id="header" class="container">
                <div id="caption-info" class="container">
                    <h1 class="col-9">我的博客系统</h1>
                    <div id="user-info" class="col-3">
                        <?php if($user) {?>
                            <span class="user-name"><?=$user["Username"]?></span>
                            <a href="logout.php">退出登录</a>
                        <?php }else { ?>
                            <span class="user-name">访客</span>
                            <a href="login.html">请登录</a>
                        <?php } ?>
                    </div>
                </div>
                <div id="main-menu">
                    <ul class="topMenu">
                        <li><a>首页</a></li>
                        <li><a href="article_list.php">文章</a></li>
                        <li id="manage">
                            <a>管理</a>
                            <ul>
                                <li id="user"><a>用户</a></li>
                                <li id="base">
                                    <a>基础数据</a>
                                    <ul>
                                        <li id="skin">皮肤管理</li>
                                        <li id="interests">兴趣管理</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
                <div id="workspace">
                    <span class="btn" id="listBtn">列表</span>
                    <span class="btn" id="cardBtn">卡片</span>
                    <div id="panel" class="list">
                        <div class="table" >
                            <div class="thead">
                                <div class="tr">
                                    <div class="th"><span class="">标题</span></div>
                                    <div class="th">作者</div>
                                    <div class="th">创建时间</div>
                                    <div class="th">操作</div>
                                </div>
                            </div>
                            <div class="tbody">
                                <?php foreach ($rows as $row){?>
                                    <div class="tr">
                                        <div class="td Title">
                                            <?=$row["Title"]?>
                                        </div>
                                        <div class="td">
                                            <?=$row["AuthorName"]?>
                                        </div>
                                        <div class="td">
                                            <?=$row["UpdateTime"]?><br />
                                            <?=$row["CreateTime"]?>
                                        </div>
                                        <div class="td">
                                            <a href="article_detail.php?Id=<?=$row["Id"]?>">详细</a>
                                            <?php if($user["id"] == $row["AuthorId"]) {?>
                                            <a href="article_modify.php?Id=<?=$row["Id"]?>">修改</a>
                                                删除
                                            <?php } ?>
                                        </div>
                                    </div>
                                <?php } ?>    
                            </div>
                        </div>
                        <script text="text/javascript" >
                            function jumpTo(pageIndex){
                                var url = "?";
                                var form = document.getElementById("form");
                                var date = getdate(form,{});
                                for(var n in data){
                                    url += "&"+ n + "=" + data[n];
                                }
                                url += "&pageIndex=" + pageIndex;
                                location.href = url;
                            }
                            function getdate(form,data){
                                for(let i=0,j=form.childNodes.length;i<j;i++){
                                    let child = form.childNodes[i];
                                    if(child.tagName=="INPUT") data[child.name] = child.value;
                                    if(child.childNodes && child.childNodes.length) getdate(child,data);
                                }
                                return data;
                            }
                        </script>
                        <div id="recordInfo">
                            共<?=$total ?>条记录，<?=$pageCount ?>页，当前页为<input type="text" value="<?=$pageIndex?>" onblur="jumpTo(this.value)"/>页,
                            <a href="art_list.php?<?=makePageUrl(1)?>">首页 </a><
                                <?php for($i =1;$i<=$pageCount;$i++){?>
                                    <a href="art_list.php?<?=makePageUrl($i)?>"> <?=$i ?> </a>
                                <?php }?>
                                >
                                <a href="art_list.php?<?=makePageUrl($pageCount)?>">尾页</a>
                        </div>
                    </div>
                </div>
            <div id="footer"></div>
        </div>
       

        <script type="text/javascript">
            document.body.firstElementChild.style.border="3px dashed red";
            document.body.children[0].style.border="2px dashed blue";

            var listBtn = document.getElementById("listBtn");
            listBtn.style.cssText = "background-color:red;display:inliine-block;width:50px;border:1px solid red;border-top-left-radius:5px;padding:5px;border-top-right-radius:5px;padding:5px;";
            
            var workspace = document.getElementById("workspace");
            var spans = workspace.getElementsByTagName("span");
            var cardBtn = spans[1];
            cardBtn.style.border = "1px solid red";

            listBtn.onclick = function(){
                var a = document.getElementById("panel");
                a.className = "list";
            };
            cardBtn.onclick = function(){
                var a = document.getElementById("panel");
                a.className = "card";
            };

            //onmouseenter动画效果
            var mainMenu = document.getElementById("main-menu");
            var lis = mainMenu.getElementsByTagName("li");
            for(var i=0,j=lis.length;i<j;i++){
                var li = lis[i];
                li.onmouseenter = function(){
                    var enterdLi = this;
                    var ul = enterdLi.children[1];
                    if(!ul){
                        return;
                    }
                    ul.style.opacity = 0.5;
                    //每过一段时间，就去。。。
                    setInterval(function(){
                        var opacity = parseFloat(ul.style.opacity);
                        opacity += 0.07;
                        if(opacity>=1){
                            opacity = 1;
                            clearInterval(tick);
                        }
                        ul.style.opacity = opacity;
                    },100);
                };
            }
        </script>
    </body>
</html>